<template>
	<view class="c_container">
		<view class="b_header">
			<view class="qh_box">
				<view class="q_box">
					<text class="b_name">姓名：</text>
					<text class="b_name_txt">{{realName}}</text>
				</view>
				<view class="q_box">
					<text class="b_name">身份证：</text>
					<text class="b_name_txt">{{idCard}}</text>
				</view>
			</view>
		</view>
		<view class="bac_box"></view>
		<tabRaduis :tabs="tabs" :active="activeIndex" @change="changeTab"></tabRaduis>
		<view v-if="activeIndex === 0" class="in_boxs">
			<view class="input_box">
				<view class="in_box" style="margin-bottom: 20rpx;">
					<text class="orgTxt">身份证<text></text></text>
					<input style="flex: 1;" v-model="idCard" type="text" placeholder-class="account-txt"
						class="uni-input" placeholder="请输入身份证号码" />
				</view>
				<view class="in_box" @click="()=>{showOrg = true}">
					<text class="orgTxt">机构<text></text></text>
					<!-- #ifndef MP-ALIPAY -->
					<input style="flex: 1;" v-model="orgName" :disabled="true" type="text"
						placeholder-class="account-txt" class="uni-input" placeholder="请输入机构名称" />
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<input style="flex: 1;" v-model="orgName" type="text" placeholder-class="account-txt"
						class="uni-input" placeholder="请输入机构名称" />
					<!-- #endif -->
				</view>
				<view style="height: calc(100vh - 480px); overflow: scroll;">
					<view v-if="isListShow"></view>
					<!-- <cardBox v-if="!isListShow" :dataList="userList" @jiebang="jiebang" @jumpCard="jumpCard" :title="'绑卡'"></cardBox> -->
				</view>
			</view>
		</view>
		<view v-if="activeIndex === 1" class="in_boxs">
			<view class="input_box">
				<!-- <view class="in_box">
					<text class="orgTxt">请选择<text></text></text>
					<view
						style="display: flex;flex: 1;flex-direction: row;justify-content: space-around;align-items: center;">
						<view class="selectBox selectTxt">{{defaultShengName}}</view>
						<picker class="selectBox" mode="selector" range-key="cityName" :value="shiIndex"
							:range="shiList" @change="bindshiSelectChange">
							<view class="selectTxt">{{defaultShiName}}
								<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image>
							</view>
						</picker>
						<picker class="selectBox" mode="selector" range-key="cityName" :value="xianIndex"
							:range="xainList" @change="bindxianSelectChange">
							<view class="selectTxt">{{defaultXianName}}
								<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image>
							</view>
						</picker>
					</view>
				</view> -->
				<view class="in_box" @click="()=>{showOrg = true}">
					<text class="orgTxt">机构<text></text></text>
					<!-- #ifndef MP-ALIPAY -->
					<input style="flex: 1;" v-model="orgName" :disabled="true" type="text"
						placeholder-class="account-txt" class="uni-input" placeholder="请输入机构名称" />
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<input style="flex: 1;" v-model="orgName" type="text" placeholder-class="account-txt"
						class="uni-input" placeholder="请输入机构名称" />
					<!-- #endif -->
				</view>
				<view class="in_box">
					<text class="orgTxt">卡号<text></text></text>
					<input style="flex: 1;" @blur="carNoLen" v-model="cardNo" type="number"
						placeholder-class="account-txt" class="uni-input" placeholder="请输入个人卡号(校园卡/机关饭卡等)" />
				</view>
				<view class="in_box">
					<text class="orgTxt">密码<text></text></text>
					<view class="pwd-view input_view">
						<input v-if="showPassword" type="text" placeholder-class="account-txt" v-model="cardPwd"
							placeholder="请输入卡密码" />
						<!-- #ifndef MP-ALIPAY -->
						<input v-if="!showPassword" type="password" placeholder-class="account-txt" v-model="cardPwd"
							placeholder="请输入卡密码" />
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<input v-if="!showPassword" password placeholder-class="account-txt" v-model="cardPwd"
							placeholder="请输入卡密码" />
						<!-- #endif -->
						<image @click="showPass"
							:src="showPassword ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'"
							class="eye_icon"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_box">
			<button type="primary" class="btn_pri" @click="toBind" v-if="activeIndex == 0">{{getName}}</button>
			<button type="primary" class="btn_pri" @click="toBind" v-if="activeIndex == 1">提交绑定</button>
		</view>
		<popup-org-model title="请选择绑卡" ref="popupOrgModel" :orgId="orgId" :activeIndex="activeIndex" :milk="true"
			@getCardNo="getCardNo" :dataList="userList" v-model="showOrg1"></popup-org-model>
		<popup-org title="选择机构" ref="popupOrg" v-model="showOrg" :parentId="parentId" @change="cliName"></popup-org>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()'
			:okBtn='okBtn'></mcModal>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @cancel="cancel"
			@ok='queren'></tmcModal>
		<mcModal :isShow="showMcModal2" :type="'password'" :showCancel="true" :placeholder="'请输入密码'" :inp="true"
			:content="content2" :title="title2" @cancel="cancel2" @ok='queren2'></mcModal>
	</view>
</template>

<script>
	import {
		queryOrg,
		// bindEmp,
		findBaseArea,
		queryMilkCardBalance,
		selectCardInfoByIdCardNo,
		openStudentMike
	} from '../../common/api/index.js'
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	import popupOrg from '../../components/custom-popup-org/custom-popup-org.vue'
	import popupOrgModel from '../../components/custom-popup-milk-org/custom-popup-model.vue'
	import tabRaduis from '../../components/custom-tabs-radius/custom-tabs-radius.vue'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	import cardBox from '../../components/card-box1.vue'
	export default {
		data() {
			return {
				tabs: [{
					activeIndex: 0,
					title: '身份证绑定'
				}, {
					activeIndex: 1,
					title: '个人卡号绑定'
				}],
				activeIndex: 0,
				cardNo: '',
				cardPwd: '',
				orgId: '',
				orgName: '',
				isMore: false,
				showPassword: false,
				realName: uni.getStorageSync('realname'),
				idCard: uni.getStorageSync('idCard'),
				jobIndex: 0,
				parentId: '',
				showOrg: false,
				showOrg1: false,
				showMcModal: false,
				content: '',
				title: '',
				okBtn: '',
				isSwitch: false,
				showMcModal1: false,
				content1: '',
				title1: '',
				selCard: 1,
				selCard1: 1,
				showMcModal2: false,
				content2: '',
				title2: '',
				cardNo1: '',
				current: 0,
				current1: 0,
				sfzCode: '',
				userList: [],
				isListShow: true,
				isClick: false,
				isClick1: false
			}
		},
		components: {
			tabRaduis,
			popupOrg,
			mcModal,
			tmcModal,
			cardBox,
			popupOrgModel
		},
		computed: {
			getName() {
				if (this.isClick) {
					return '重置信息'
				} else {
					return this.selCard == 0 ? '提交绑定' : this.selCard == 1 ? '查询' : ''
				}
			},
			getName1() {
				if (this.isClick1) {
					return '重置信息'
				} else {
					return this.selCard1 == 0 ? '提交绑定' : this.selCard1 == 1 ? '查询' : ''
				}
			},
			sList() {
				if (this.schCount == 0 && !this.isMore) {
					return this.schoolList = []
				}
				if (this.schCount <= 10 && !this.isMore) {
					return this.schoolList
				}
				if (this.schCount > 10 && !this.isMore) {
					return this.schoolList
				}
				if (this.schCount > 10 && this.isMore) {
					return this.schoolList
				}
			}
		},
		methods: {
			cancel2() {
				this.showMcModal2 = false
			},
			_queryMilkCardBalance() {
				let s_userId = uni.getStorageSync('s_userId')
				queryMilkCardBalance({
					userId: s_userId,
					queryCard: true,
					queryWallet: true,
					bindType: 0
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						this.userList = res.data.students
					} else {
						this.userList = []
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			jiebang(value) {
				if (this.cardNo1 == undefined) {
					uni.showToast({
						title: '请选择卡号'
					})
				} else {
					this.content2 = 'xxxxx'
					this.title2 = '请输入卡密码完成绑定'
					this.showMcModal2 = true
				}
			},
			getCardNo(cardNo) {
				this.cardNo1 = cardNo
			},
			jumpCard(cardNo) {
				this.cardNo1 = cardNo
				// uni.navigateTo({
				// 	url: '/packageCard/card/danganCard?arrObj=' + encodeURIComponent(JSON.stringify(arr)) + '&empName=' + empName
				// })
			},
			radioChange(evt) {
				this.selCard = evt.target.value
				this.orgName = ''
				this.orgId = ''
				this.sfzCode = ''
				this.isClick = false
				this.$refs.popupOrg.clearItem()
				this.isListShow = true
			},
			radioChange1(evt) {
				this.selCard1 = evt.target.value
				this.orgName = ''
				this.orgId = ''
				this.sfzCode = ''
				this.$refs.popupOrg.clearItem()
				this.isListShow = true
			},
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				if (this.isSwitch) {
					uni.reLaunch({
						url: '/pageMilk/index/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/me/paySetting'
					})
				}
			},
			cancel() {
				this.showMcModal1 = false
			},
			queren() {
				this.showMcModal1 = false
			},
			changeTab(obj) {
				this.activeIndex = obj.activeIndex
				this.orgName = ''
				this.orgId = ''
				this.userList = []
				this.isListShow = true
				this.cardNo = ''
				this.cardPwd = ''
				this.sfzCode = ''
				this.isClick1 = false
				this.isClick = false
				this.$refs.popupOrg.clearItem()
				if (this.activeIndex == 0) {
					this.selCard = 1
				} else if (this.activeIndex == 1) {
					this.selCard1 = 1
				}
			},
			showPass() {
				this.showPassword = !this.showPassword;
			},
			pad(num, n) {
				var len = num.length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				this.cardNo = num;
				return num;
			},
			carNoLen() {
				this.cardNo = this.cardNo.replace(/\s*/g,"")
				if (this.cardNo.length == 0) {
					return
				} else if (this.cardNo.length < 8) {
					_showToast('卡号不足8位系统将自动补足')
					this.pad(this.cardNo, 8)
				}
			},
			toCancel() {
				this.isValue = false
			},
			showOrgChange() {
				this.showOrg = !this.showOrg
				this.onInput("")
			},
			toBind() {
				if (this.activeIndex == 0) { // 身份证
					if (this.isClick) {
						this.isClick = false
						this.isListShow = true
						this.orgName = ''
						this.orgId = ''
						this.$refs.popupOrg.clearItem()
					} else {
						this._selectCardInfoByIdCardNo(this.idCard, this.orgId)
					}
				} else if (this.activeIndex == 1) { // 卡号
					this._toBind()
				}
			},
			_toBind() {
				let s_userId = uni.getStorageSync('s_userId')
				if (this.orgId == '') {
					_showToast('请选择机构')
				} else if (this.cardNo == '') {
					_showToast('请输入个人卡号~')
				} else if (this.cardPwd == '') {
					_showToast('请输入卡密码~')
				} else {
					_showLoading('绑定中,请稍后...')
					openStudentMike({
						orgId: this.orgId,
						cardNo: this.cardNo.replace(/\s*/g,""),
						userId: s_userId,
						cardPwd: this.cardPwd,
						bindType: 0
					}).then(res => {
						if (res.code == 0) {
							uni.hideLoading()
							if (this.activeIndex == 0) {
								// this.title = '绑卡成功'
								// this.content = '请设置支付密码'
								// this.okBtn = '前往设置'
								// this.isSwitch = false
								// this.showMcModal = true
								this.title = '温馨提示'
								this.content = '绑卡成功'
								this.okBtn = '确认'
								this.isSwitch = true
								this.showMcModal = true
							} else {
								this.title = '温馨提示'
								this.content = '绑卡成功'
								this.okBtn = '确认'
								this.isSwitch = true
								this.showMcModal = true
							}
						} else {
							uni.hideLoading()
							this.title1 = '操作失败'
							this.content1 = res.msg
							this.showMcModal1 = true
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}
			},
			_selectCardInfoByIdCardNo(idCardNo, orgId) {
				if(idCardNo == "" || idCardNo == null){
					_showToast('请填写本人身份证号码！')
					return
				}
				if(orgId == "" || orgId == null){
					_showToast('请选择绑卡机构！')
					return
				}
				_showLoading('查询中,请稍后...')
				selectCardInfoByIdCardNo({
					idCardNo,
					orgId
				}).then(res => {
					if (res.code == 0) {
						this.isListShow = false
						this.userList = res.data.map(item => {
							item = {...item, orgName: this.orgName}
							return item
						})
						
						// if (this.activeIndex == 0) {
						// 	this.isClick1 = true
						// } else {
						this.isClick = true
						// }
						this.showOrg1 = true
					} else {
						uni.showModal({
							title: '温馨提示',
							content: `${res.msg}`,
							showCancel: false
						})
					}
					uni.hideLoading()
				}).catch(err => {
					this.isListShow = true
					uni.hideLoading()
					console.log(err)
				})
			},
			cliName(obj) {
				this.orgId = obj.orgId;
				this.orgName = obj.orgName;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.c_container {
		height: 100%;

		.b_header {
			width: 100vw;
			height: 350rpx;
			background-image: url('');
			background-size: 100%;
			background-repeat: no-repeat;
			display: flex;
			justify-content: center;
			position: relative;

			.qh_box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background: linear-gradient(180deg, #F9FCFF 0%, #EDEFFF 100%);
				border-radius: 8px 8px 0px 0px;
				width: 80%;
				height: 120rpx;
				position: absolute;
				bottom: 0;
				padding: 40rpx;

				.q_box {
					display: flex;
					flex-direction: row;

					.b_name {
						font-size: 28rpx;
						font-family: "PingFang-SC-Medium, PingFang-SC";
						font-weight: 500;
						color: #6B707A;
					}

					.b_name_txt {
						font-size: 28rpx;
						font-family: "PingFangSC-Semibold, PingFang SC";
						font-weight: 600;
						color: #3C424F;
					}
				}
			}
		}

		.bac_box {
			width: 100%;
			height: 20rpx;
			background-color: #185AFF;
		}

		.in_boxs {
			border-radius: 16rpx 16rpx 0px 0px;
			padding: 30rpx 50rpx;
			display: flex;
			flex: 1;
			background-color: #FFFFFF;

			.input_box {
				width: 100%;

				.in_box {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 0 20rpx;
					height: 84rpx;
					margin-bottom: 20rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 1px solid #E6E6E6;

					.orgTxt {
						font-size: 28rpx;
						font-family: "PingFangSC-Medium, PingFang SC";
						font-weight: 500;
						color: #6B707A;
						margin-right: 14rpx;
						width: 100rpx;
						text-align: justify;
						height: 40rpx;
					}
				}
			}
		}

		.btn_box {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 30rpx;
			left: 0;
			width: 100%;

			.btn_pri {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				width: 90%;
				font-size: 32rpx;
				font-family: "PingFangSC-Heavy, PingFang SC";
				font-weight: 600;
				color: #FFFFFF;
				background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
				box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
				border-radius: 8rpx;
			}
		}
	}

	.pwd-view {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 85%;
	}

	.account-txt {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #ADADAD;
	}

	.in_box:last-child {
		margin: 0;
	}

	.eye_icon {
		width: 18px;
		height: 18px;
	}

	.uni-input {
		padding: 0;
		font-family: "PingFangSC-Medium, PingFang SC";
		color: rgb(107, 112, 122);
	}

	.selectBox {
		display: flex;
		// flex: 1;
		justify-content: center;
		align-items: center;
	}

	.selectBox:last-child {
		margin-right: 0;
	}

	.orgTxt text {
		display: inline-block;
		width: 100%;
		height: 0;
	}

	.selectTxt {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}

	.down_icon {
		width: 48rpx;
		height: 48rpx;
	}

	.popup {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 199;

		.popup_mask {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.3);
		}

		.popup-content {
			height: 90%;
			width: 100%;
			display: flex;
			position: absolute;
			bottom: 0;
			flex-direction: column;
			background-color: #FFF;
			border-top-right-radius: 36upx;
			border-top-left-radius: 36upx;
		}

		.search_input {
			height: 40rpx;
			padding: 30rpx 20rpx;
			border-bottom: 1px #f5f5f5 solid;
		}

		.schoolList {
			width: 100%;
			height: calc(100% - 300rpx);
		}

		.item {
			padding: 0 24upx;
			line-height: 100upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
	}

	.sel_box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		padding-bottom: 20rpx;
	}

	.lab_txt {
		display: flex;
		flex: 1;
		padding-left: 20rpx;
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}

	.radio_box {
		display: flex;
		flex: 2.5;
		justify-content: space-between;
		align-items: center;
	}

	.radioTxt {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}
</style>
